<template>
  <el-row justify="center">
    <h1>购物车</h1>
  </el-row>
  <div>
    <el-table :data="carObj" style="width: 100%;margin-bottom: 20px " border stripe>
      <el-table-column prop="name" label="商品名"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column label="购买数量" prop="num">
        <template #default="scope">
          <el-input-number :min="1" v-model="scope.row.num" @blur="update(scope.row.num,scope.row.name)"
                           @click="update(scope.row.num,scope.row.name)"      ></el-input-number>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="remove(scope.row.name)">删除商品</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-button type="success" @click="this.$router.push('/')">继续购物</el-button>
    <span style="padding-left: 20px">总价:{{ totalPrice }}</span>

  </div>
</template>
<script>
import axios from "axios";
import {ElMessage} from 'element-plus'

export default {
  data() {
    return {
      carObj: [],
      totalPrice: 0
    }
  }, methods: {
    remove(name) {
      axios.get("/project/shop/del", {params: {name: name}}).then(n => {
        if (n.data == "ok") {
          ElMessage({
            message: '移除商品',
            type: 'success',
          })
          this.find();

        }

      })

    },
    update(num,name) {
      axios.get("/project/shop/update", {
        params: {
          name: name,
          updateNum: num
        }
      }).then(n => {
        if (n.data == "ok") {
          this.find();
        }

      })


    }
    , getTotalPrice() {
      this.totalPrice=0;
      this.carObj.forEach(n => {
        this.totalPrice += n.price * n.num
      })

    }, find() {
      axios.get("/project/shop/find").then(n => {
        this.carObj = n.data;
        this.getTotalPrice();
      })

    }


  }, mounted() {
    this.find();


  }
}
</script>

<style scoped>

</style>